/*
* 新人专区设置
* @Author: Li Yujie
* @Date: 2020-11-24
*/
<template>
    <div class="wrapper">
        <div class="page">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    专区配置
                </div>
            </div>
            <!-- /header -->

            <!--表单-->
            <el-form
                :model="ruleForm"
                :rules="rules"
                label-position="left"
                ref="ruleForm"
                label-width="120px"
                class="form-wrap"
            >
                <el-form-item
                    label="专区有效期"
                    prop="day"
                >
                    <el-input
                        v-model="ruleForm.day"
                        size="medium"
                        clearable
                        style="width: 380px"
                    >
                        <span
                            slot="suffix"
                            :style="{color: 'rgba(102, 102, 102, 1)', marginRight: '8px'}"
                        >
                            天
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="专区商品排序"
                    prop="sortType"
                >
                    <el-select
                        v-model="ruleForm.sortType"
                        size="medium"
                        style="width: 380px"
                    >
                        <el-option
                            v-for="item in optionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!--<el-form-item
                    label="前三商品排序"
                >
                    <div
                        class="input-wrap"
                        v-for="(item, index) in ruleForm.goodsSortList"
                        :key="index"
                    >
                        <el-form-item
                            :prop="`goodsSortList[${index}]`"
                            :rules="rules.goodsSortList"
                        >
                            <el-input
                                v-model="ruleForm.goodsSortList[index]"
                                placeholder="请输入商品编号"
                                size="medium"
                                clearable
                                style="width: 380px"
                            />
                        </el-form-item>
                    </div>
                </el-form-item>-->
                <el-form-item
                    label="首页优惠券配置"
                    prop="homepageCoupon"
                >
                    <el-radio-group v-model="ruleForm.index_award_type">
                        <el-radio :label="1">优惠券</el-radio>
                        <el-radio :label="2">红包</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="ruleForm.homepageCoupon"
                        :placeholder="ruleForm.index_award_type === 1 ? '请输入优惠券编号' : '请输入红包编号'"
                        size="medium"
                        clearable
                        style="width: 380px"
                    />
                </el-form-item>
                <el-form-item
                    label="弹窗优惠券配置"
                    prop="dialogCouponList"
                >
                    <el-radio-group v-model="ruleForm.first_order_get_award_type">
                        <el-radio :label="1">优惠券</el-radio>
                        <el-radio :label="2">红包</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <div
                        class="input-wrap"
                        v-for="(item, index) in ruleForm.dialogCouponList"
                        :key="index"
                    >
                        <el-input
                            v-model="ruleForm.dialogCouponList[index]"
                            :placeholder="ruleForm.first_order_get_award_type === 1 ? '请输入优惠券编号' : '请输入红包编号'"
                            size="medium"
                            clearable
                            style="width: 380px; margin-right: 12px"
                        />
                        <el-button
                            size="medium"
                            type="primary"
                            v-if="ruleForm.dialogCouponList.length > 1"
                            @click="deleteCoupon(index)"
                        >
                            删除
                        </el-button>
                        <el-button
                            size="medium"
                            type="primary"
                            @click="addCoupon"
                            v-if="index === ruleForm.dialogCouponList.length - 1"
                        >
                            继续添加
                        </el-button>
                        <span
                            v-if="index === 0"
                            class="tips"
                        >
                            最多添加不能超过12张优惠券或红包
                        </span>
                    </div>
                </el-form-item>
            </el-form>
            <!--/表单-->

            <div class="btn-group">
                <el-button
                    size="medium"
                    @click="handleCancel()"
                >返回</el-button>
                <el-button
                    size="medium"
                    type="primary"
                    @click="handleSubmit()"
                >完成</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';

export default {
    name: "NewPeopleSetting",
    data() {
        return {
            ruleForm: {
                //有效天数
                day: '',
                // 排序类型
                sortType: 1,
                // 前三商品排序
                goodsSortList: ['','',''],
                // 首页优惠券
                homepageCoupon: '',
                // 首页 优惠券1 红包2
                index_award_type: 1,
                // 弹窗配置 优惠券1 红包2
                first_order_get_award_type: 1,
                // 弹窗优惠券
                dialogCouponList: ['']
            },
            // 校验规则
            rules: {
                day: [
                    { required: true, message: '请设置专区有效期', trigger: 'blur' }
                ],
                goodsSortList: [
                    { required: true, message: '请输入商品编号', trigger: 'blur' }
                ],
            },
            optionList: [
                {label: '默认排序号', value: 1},
                {label: '销售量排序', value: 2},
                {label: '添加时间排序', value: 3}
            ]
        };
    },
    mixins: [back],
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '新人专区', path: '/student/new-people-list'}, {title: '专区配置'}]);
        this.getSetting();
    },
    methods: {

        /**
         * 提交
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    let ruleForm = {...this.ruleForm};
                    let dialogCouponList = ruleForm.dialogCouponList.filter(item => item.trim());

                    let params = {
                        welfare_user_valid_day: ruleForm.day,
                        goods_list_order_type: ruleForm.sortType,
                        index_award_type: ruleForm.index_award_type,
                        first_order_get_award_type: ruleForm.first_order_get_award_type,
                    };

                    // 优惠券
                    if(params.index_award_type === 1) {
                        params.index_coupon_no = ruleForm.homepageCoupon;
                    } else {
                        params.index_packet_no = ruleForm.homepageCoupon;
                    }

                    // 红包
                    if(params.first_order_get_award_type === 1) {
                        params.first_order_get_coupon_nos = dialogCouponList.join(',');
                    } else {
                        params.first_order_get_packet_nos = dialogCouponList.join(',');
                    }

                    this.$post('/student/shop_welfare%5Cset_config', params, resp => {
                        if (resp.code === 1) {
                            this.$message.success('配置成功');
                        } else {
                            this.$notify({
                                title: '失败',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * 返回列表
         */
        handleCancel() {

            this.$router.push({
                path: '/student/new-people-list'
            });
        },

        /**
         * 获取设置
         */
        getSetting() {
            this.$post('/student/shop_welfare%5Cget_config', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm.day = resp.data.welfare_user_valid_day;
                    this.ruleForm.sortType = resp.data.goods_list_order_type;
                    this.ruleForm.index_award_type = resp.data.index_award_type;
                    this.ruleForm.first_order_get_award_type = resp.data.first_order_get_award_type;
                    this.ruleForm.homepageCoupon = resp.data.index_award_type === 1 ? resp.data.index_coupon_no : resp.data.index_packet_no;

                    // if(resp.data.top_welfare_nos.length === 0) {
                    //     this.ruleForm.goodsSortList = ['','',''];
                    // } else {
                    //     this.ruleForm.goodsSortList = resp.data.top_welfare_nos;
                    // }

                    // 优惠券
                    if(resp.data.first_order_get_award_type === 1) {
                        if(resp.data.first_order_get_coupon_nos.length === 0) {
                            this.ruleForm.dialogCouponList = [''];
                        } else {
                            this.ruleForm.dialogCouponList = resp.data.first_order_get_coupon_nos;
                        }
                    }

                    // 红包
                    if(resp.data.first_order_get_award_type === 2) {
                        if(resp.data.first_order_get_packet_nos.length === 0) {
                            this.ruleForm.dialogCouponList = [''];
                        } else {
                            this.ruleForm.dialogCouponList = resp.data.first_order_get_packet_nos;
                        }
                    }
                } else {
                    this.$notify({
                        title: '失败',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         *  添加优惠券
         */
        addCoupon() {
            if(this.ruleForm.dialogCouponList.length >= 12) {
                this.$message(`${this.ruleForm.first_order_get_award_type === 1 ? '最多添加不能超过12张优惠券' : '最多添加不能超过12个红包'}`);
                return;
            }
            this.ruleForm.dialogCouponList.push('');
        },

        /**
         * 删除优惠券
         * @param index
         */
        deleteCoupon(index) {
            this.ruleForm.dialogCouponList.splice(index, 1);
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;
    position: relative;
    background: #fff;
    box-sizing: border-box;

    .page {
        width: 100%;
        background: #fff;
    }

    /*header*/

    .header {
        height: 68px;
        padding: 24px;
        box-sizing: border-box;
        box-shadow: 0px -1px 0px 0px #F0F2F5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F0F2F5;

        .header-title {
            color: #333333;
            font-size: 20px;
            height: 20px;
            font-weight: 500;
            position: relative;
            margin: 24px 0 24px 12px;

            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: #1890FF;
            }
        }
    }

    /*表单*/

    .form-wrap {
        padding: 30px;
        .input-wrap:not(:last-of-type) {
            margin-bottom: 20px;
        }
    }
    .btn-group {
        margin-left: 120px;
        padding-bottom: 36px;
        .el-button {
            margin: 0 24px;
        }
    }
    .tips {
        margin-left: 24px;
        font-size: 14px;
        color: #999;
    }
}
</style>
